<template>
  <div>
    <van-index-bar :index-list="indexList" @select="selectindex">
      <div v-for="(item, index) in SelectLocation" :key="item.index">
        <div v-if="!item.isflex">
          <van-index-anchor :index="indexList[index]">{{
            item.title
          }}</van-index-anchor>
          <van-cell
            v-for="(i, Index) in item.cities"
            :key="Index"
            @click="slectCity(i)"
            >{{ i }}</van-cell
          >
        </div>
        <div v-else>
          <van-index-anchor :index="indexList[index]">{{
            item.title
          }}</van-index-anchor>
          <van-cell class="kflex">
            <p
              v-for="(i, Index) in item.cities"
              :key="Index"
              @click="slectCity(i)"
            >
              {{ i }}
            </p>
          </van-cell>
        </div>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      indexList: [
        "定位",
        "最近",
        "热门",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z"
      ],
      SelectLocation: [
        {
          isflex: true,
          title: "定位",
          cities: ["定位失败，请点击重试"]
        },
        {
          isflex: true,
          title: "最近",
          zuijin: true,
          cities: ["长沙"]
        },
        {
          isflex: true,
          title: "热门",
          cities: [
            "上海",
            "北京",
            "广州",
            "深圳",
            "武汉",
            "天津",
            "西安",
            "南京",
            "杭州",
            "成都",
            "重庆"
          ]
        },
        {
          isflex: false,
          title: "A",
          cities: [
            "阿拉善盟",
            "鞍山",
            "安庆",
            "安阳",
            "阿坝",
            "阿里",
            "安顺",
            "安康",
            "阿勒泰",
            "阿克苏",
            "安吉",
            "安丘",
            "安岳",
            "安平",
            "安宁",
            "安溪",
            "安化",
            "阿勒泰市",
            "安福",
            "阿荣旗",
            "安陆市",
            "安州市",
            "阿城区"
          ]
        },
        {
          isflex: false,
          title: "B",
          cities: [
            "北京",
            "保定",
            "蚌埠",
            "包头",
            "本溪",
            "巴彦江",
            "白城",
            "白山",
            "毫州",
            "滨州",
            "巴中",
            "北海",
            "百色",
            "毕节",
            "保山",
            "宝鸡",
            "白银",
            "巴州",
            "薄塔拉",
            "霸州",
            "滨海",
            "宝应",
            "北流",
            "博爱"
          ]
        },
        {
          isflex: false,
          title: "C",
          cities: ["重庆", "成都", "长沙", "常州", "长春", "沧州"]
        },
        {
          isflex: false,
          title: "D",
          cities: [
            "大连",
            "东莞",
            "大庆",
            "大同",
            "丹东",
            "大兴安岭",
            "东营",
            "德州",
            "德阳"
          ]
        },
        {
          isflex: false,
          title: "E",
          cities: [
            "鄂尔多斯",
            "鄂州",
            "恩施",
            "峨眉山",
            "额尔古纳",
            "恩平",
            "客额敏县"
          ]
        },
        {
          isflex: false,
          title: "F",
          cities: [
            "福州",
            "佛山",
            "抚顺",
            "阜新",
            "阜阳",
            "抚州",
            "防城港",
            "涪陵",
            "富阳",
            "福清",
            "凤凰",
            "肥城",
            "阜宁",
            "奉化"
          ]
        },
        {
          isflex: false,
          title: "G",
          cities: [
            "广州",
            "桂林",
            "贵阳",
            "赣州",
            "广元",
            "广安",
            "贵港",
            "甘孜",
            "甘南",
            "固原",
            "巩义",
            "桂平",
            "高邮"
          ]
        },
        {
          isflex: false,
          title: "H",
          cities: [
            "杭州",
            "合肥",
            "葫芦岛",
            "海口",
            "哈尔滨",
            "邯郸",
            "呼和浩特",
            "衡水",
            "衡阳"
          ]
        },
        {
          isflex: false,
          title: "J",
          cities: [
            "锦州",
            "焦作",
            "晋城",
            "晋中",
            "多",
            "佳木斯",
            "金华",
            "吉安"
          ]
        },
        {
          isflex: false,
          title: "K",
          cities: [
            "昆明",
            "开封",
            "昆山",
            "喀什地区",
            "克拉玛依",
            "凯里",
            "开平",
            "库尔勒",
            "奎屯",
            "开州区",
            "垦利",
            "宽城",
            "开阳",
            "开化",
            "康县",
            "昆玉市"
          ]
        },
        {
          isflex: false,
          title: "L",
          cities: [
            "廊坊",
            "临汾",
            "吕梁",
            "辽阳",
            "辽源",
            "连云港",
            "六安",
            "丽水",
            "龙岩",
            "洛阳",
            "聊城",
            "临沂",
            "莱芜",
            "漯河"
          ]
        },
        {
          isflex: false,
          title: "M",
          cities: [
            "牡丹江",
            "马鞍山",
            "茂名",
            "梅州",
            "绵阳",
            "眉山",
            "密山",
            "漠河",
            "满洲里",
            "明光",
            "梅河口",
            "汨罗",
            "孟州",
            "麻城"
          ]
        },
        {
          isflex: false,
          title: "N",
          cities: [
            "宁波",
            "南京",
            "南昌",
            "南通",
            "南宁",
            "宁德",
            "南平",
            "南阳",
            "内江",
            "南充",
            "怒江",
            "那曲",
            "南沙",
            "宁海"
          ]
        },
        {
          isflex: false,
          title: "P",
          cities: [
            "盘锦",
            "莆田",
            "萍多",
            "平顶山",
            "濮阳",
            "攀枝花",
            "普洱",
            "平凉",
            "邳州",
            "普宁",
            "平湖",
            "平度",
            "彭州",
            "蓬莱区",
            "鄱阳"
          ]
        },
        {
          isflex: false,
          title: "Q",
          cities: [
            "青岛",
            "泉州",
            "齐齐哈尔",
            "秦皇岛",
            "七台河",
            "衢州",
            "清远",
            "钦州",
            "黔西南",
            "曲靖",
            "黔东南",
            "黔南",
            "庆阳",
            "迁安",
            "琼海",
            "曲阜"
          ]
        },
        {
          isflex: false,
          title: "R",
          cities: [
            "日照",
            "日喀则",
            "仁怀",
            "瑞安",
            "如皋",
            "荣成",
            "乳山",
            "汝州",
            "瑞金",
            "瑞昌",
            "仁寿",
            "任丘",
            "任泽区",
            "如东",
            "汝阳"
          ]
        },
        {
          isflex: false,
          title: "S",
          cities: [
            "上海",
            "深圳",
            "沈阳",
            "石家庄",
            "苏州",
            "三亚",
            "汕头",
            "朔州"
          ]
        },
        {
          isflex: false,
          title: "T",
          cities: [
            "天津",
            "太原",
            "唐山",
            "通辽",
            "铁岭",
            "通化",
            "台州",
            "泰州",
            "铜陵",
            "泰安",
            "铜仁",
            "铜川",
            "天水",
            "塔城",
            "吐鲁番"
          ]
        },
        {
          isflex: false,
          title: "W",
          cities: [
            "无锡",
            "武汉",
            "芜湖",
            "温州",
            "乌海",
            "乌兰察布",
            "威海",
            "潍坊",
            "梧州",
            "渭南",
            "武威",
            "乌鲁木齐",
            "昊忠",
            "武夷山"
          ]
        },
        {
          isflex: false,
          title: "X",
          cities: ["西安", "厦门", "新乡", "徐州", "邢台", "忻州"]
        },
        {
          isflex: false,
          title: "Y",
          cities: [
            "烟台",
            "阳泉",
            "运城",
            "营口",
            "延边",
            "伊春",
            "盐城",
            "鹰潭"
          ]
        },
        {
          isflex: false,
          title: "Z",
          cities: ["郑州", "淄博", "珠海", "中山", "张家口", "舟山"]
        }
      ]
    }
  },
  created() {
    this.SelectLocation.forEach((el, index) => {
      // 找到最近模块
      if (el.zuijin) {
        el.cities = localStorage.RSC.split(",")
      }
    })
  },
  methods: {
    selectindex() {
      console.log("tab")
    },
    slectCity(city) {
      this.SelectLocation.forEach((el, index) => {
        // 找到最近模块
        if (el.zuijin) {
          // 最近的城市列表有用户选择的城市，且长度等于二或三时
          if (el.cities.indexOf(city) !== -1 && (el.cities.length === 2) | 3) {
            const index = el.cities.indexOf(city)
            el.cities.splice(index, 1)
            el.cities.unshift(city)
            // 开头插入元素，删除最后元素
          } else if (el.cities.length >= 3) {
            el.cities.unshift(city)
            el.cities.pop()
            // 长度小于3，添加元素
          } else {
            el.cities.unshift(city)
          }
          localStorage.RSC = el.cities
          console.log(localStorage.RSC)
          console.log(el.cities)
        }
      })
      this.$store.commit("homeStore/updateCity", city)
      console.log(this.$store.state.homeStore.NowCity)
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
.van-index-bar {
  /deep/ .van-index-bar__sidebar {
    height: 540px;
    justify-content: space-between;
  }
  .van-cell::after {
    border-bottom: 1px solid #b7bbc0;
  }
  .kflex {
    background-color: #f9f9f9;
    .van-cell__value {
      display: flex;
      flex-wrap: wrap;
      p {
        height: 33px;
        color: #333;
        margin: 10px 0 0 14.7px;
        padding: 0 40px;
        line-height: 33px;
        background-color: #fff;
      }
    }
  }
}
</style>
